<script src="../dist/browser/tfjs-onnx.js"></script>
<script src="utils.js"></script>
<script src="ILSVRC2012.js"></script>

<canvas id="img"></canvas>
<div id="result"></div>

<script>
  const imgUrl = 'img/cat.jpg';
  const modelUrl = 'models/squeezenet/model.onnx';
  const imgElem = document.getElementById('img');

  (async function(){
    // Load the image
    const img = await tf.onnx.util.loadImageData(imgUrl);

    // Load the model
    const model = await tf.onnx.loadModel(modelUrl);
    console.debug(model);

    // Load the pixel and scale to model input
    const data = getImageData(img, {shape: [224, 224]});

    // Visualize image
    displayImage(data, 'img');

    // Perform the forward pass and return the prediction
    const predictions = tf.tidy(() => model.predict(data));

    // Output the result
    const topK = await getTopKClasses(predictions, 5);

    const probs = topK[0];
    const classNames = Array.from(topK[1]).map(d => IMAGENET_CLASSES[d]);

    displayLabel(probs, classNames, 'result');
  })();
</script>
